{% assign data = section.settings %}
<div class="block_testimonials">
    <div class="container_wrapper">
        <div class="container">
            <div class="left_box">
                <div>
                    {% if data.subtitle != '' %}
                    <div class="subtitle">{{data.subtitle}}</div>
                    {% endif %}
                    {% if data.title != '' %}
                    <h2 class="title_section general_title-color">{{data.title}}</h2>
                    {% endif %}
                </div>
                <div class="swiper_btn_box">
                    <div class="btn_wrap">
                        <div class="swiper-button-next-my">
                            <svg viewBox="0 0 10 16" fill="none" role="presentation" class="icon icon-caret-left"
                                aria-hidden="true" focusable="false">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M1.58188 7.76454L0.874768 8.47165L1.58188 9.17876L7.66722 15.2641L8.37433 14.557L2.28898 8.47165L8.37433 2.38631L7.66722 1.6792L1.58188 7.76454Z"
                                    fill="currentColor"></path>
                                <path
                                    d="M0.874768 8.47165L0.521215 8.1181L0.16766 8.47165L0.521215 8.8252L0.874768 8.47165ZM1.58188 7.76454L1.93543 8.1181L1.93543 8.1181L1.58188 7.76454ZM1.58188 9.17876L1.93543 8.8252L1.93543 8.8252L1.58188 9.17876ZM7.66722 15.2641L7.31367 15.6177L7.66722 15.9712L8.02077 15.6177L7.66722 15.2641ZM8.37433 14.557L8.72788 14.9106L9.08143 14.557L8.72788 14.2034L8.37433 14.557ZM2.28898 8.47165L1.93543 8.1181L1.58188 8.47165L1.93543 8.8252L2.28898 8.47165ZM8.37433 2.38631L8.72788 2.73986L9.08144 2.38631L8.72788 2.03275L8.37433 2.38631ZM7.66722 1.6792L8.02078 1.32565L7.66722 0.972092L7.31367 1.32565L7.66722 1.6792ZM1.22832 8.8252L1.93543 8.1181L1.22832 7.41099L0.521215 8.1181L1.22832 8.8252ZM1.93543 8.8252L1.22832 8.1181L0.521215 8.8252L1.22832 9.53231L1.93543 8.8252ZM8.02077 14.9105L1.93543 8.8252L1.22832 9.53231L7.31367 15.6177L8.02077 14.9105ZM8.02077 14.2034L7.31367 14.9105L8.02077 15.6177L8.72788 14.9106L8.02077 14.2034ZM1.93543 8.8252L8.02077 14.9106L8.72788 14.2034L2.64254 8.1181L1.93543 8.8252ZM8.02078 2.03275L1.93543 8.1181L2.64254 8.8252L8.72788 2.73986L8.02078 2.03275ZM7.31367 2.03275L8.02078 2.73986L8.72788 2.03275L8.02078 1.32565L7.31367 2.03275ZM1.93543 8.1181L8.02078 2.03275L7.31367 1.32565L1.22832 7.41099L1.93543 8.1181Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                        <div class="swiper-pagination-my" id="swiper-pagination-my_{{ block_id | default : section.block_id  }}"></div>
                        <div class="swiper-button-prev-my">
                            <svg viewBox="0 0 10 16" fill="none" role="presentation" class="icon icon-caret-right"
                                aria-hidden="true" focusable="false">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M8.30497 9.17881L9.01207 8.47171L8.30497 7.7646L2.21962 1.67926L1.51251 2.38636L7.59786 8.47171L1.51251 14.5571L2.21962 15.2642L8.30497 9.17881Z"
                                    fill="currentColor"></path>
                                <path
                                    d="M9.01207 8.47171L9.36563 8.82526L9.71918 8.47171L9.36563 8.11815L9.01207 8.47171ZM8.30497 9.17881L7.95141 8.82526V8.82526L8.30497 9.17881ZM8.30497 7.7646L7.95141 8.11816V8.11816L8.30497 7.7646ZM2.21962 1.67926L2.57317 1.3257L2.21962 0.97215L1.86607 1.3257L2.21962 1.67926ZM1.51251 2.38636L1.15896 2.03281L0.805407 2.38636L1.15896 2.73992L1.51251 2.38636ZM7.59786 8.47171L7.95141 8.82526L8.30497 8.47171L7.95141 8.11816L7.59786 8.47171ZM1.51251 14.5571L1.15896 14.2035L0.805405 14.5571L1.15896 14.9106L1.51251 14.5571ZM2.21962 15.2642L1.86607 15.6177L2.21962 15.9713L2.57317 15.6177L2.21962 15.2642ZM8.65852 8.11815L7.95141 8.82526L8.65852 9.53237L9.36563 8.82526L8.65852 8.11815ZM7.95141 8.11816L8.65852 8.82526L9.36563 8.11815L8.65852 7.41105L7.95141 8.11816ZM1.86607 2.03281L7.95141 8.11816L8.65852 7.41105L2.57317 1.3257L1.86607 2.03281ZM1.86607 2.73992L2.57317 2.03281L1.86607 1.3257L1.15896 2.03281L1.86607 2.73992ZM7.95141 8.11816L1.86607 2.03281L1.15896 2.73992L7.24431 8.82526L7.95141 8.11816ZM1.86607 14.9106L7.95141 8.82526L7.24431 8.11816L1.15896 14.2035L1.86607 14.9106ZM2.57317 14.9106L1.86607 14.2035L1.15896 14.9106L1.86607 15.6177L2.57317 14.9106ZM7.95141 8.82526L1.86607 14.9106L2.57317 15.6177L8.65852 9.53237L7.95141 8.82526Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_box">
                <div class="swiper" id="testimonials_swiper_{{ block_id | default : section.block_id  }}">
                    <ul class="swiper-wrapper">
                        {% for block in section.blocks %}
                        <li class="swiper-slide">
                            {% if block.title != '' %}
                            <div class="slide_title">{{block.title}}</div>
                            {% endif %}
                            <div class="star">
                                {% for i in (1..block.star) %}
                                {% include 'icon_star' %}
                                {% endfor %}
                            </div>
                            <div class="testimonials__slide-meta">
                                {% if block.name != '' %}
                                <span class="testimonials__slide-name">{{block.name}}</span>
                                {% endif %}
                                {% if block.country != '' %}
                                <span class="testimonials__slide-country">{{block.country}}</span>
                                {% endif %}
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
(function () {
  let swiper = null;
  let timer = null;
  swiper = new Swiper(
    "#testimonials_swiper_{{ block_id | default : section.block_id  }}",
    {
      loop: true,
      slidesPerView: $(window).width() < 768 ? 1 : 2,
      spaceBetween: 20,
      navigation: {
        nextEl: ".swiper-button-prev-my",
        prevEl: ".swiper-button-next-my",
      },
      pagination: {
        el: "#swiper-pagination-my_{{ block_id | default : section.block_id  }}",
        type: "fraction",
      }
    }
  );
  $(window).on("resize", function () {
    clearTimeout(timer)
    timer = setTimeout(() => {
      swiper.destroy(true, true)
      swiper = null;
      swiper = new Swiper(
        "#testimonials_swiper_{{ block_id | default : section.block_id  }}",
        {
          loop: true,
          slidesPerView: $(window).width() < 768 ? 1 : 2,
          spaceBetween: 20,
          navigation: {
            nextEl: ".swiper-button-prev-my",
            prevEl: ".swiper-button-next-my",
          },
          pagination: {
            el: "#swiper-pagination-my_{{ block_id | default : section.block_id  }}",
            type: "fraction",
          },
        }
      );
    }, 100);
  });
})();
</script>
{% schema %}
{
	"tag": "",
	"class": "block_testimonials",
	"is_global": false,
	"icon": "icon-lunbotu",
	"name": {
		"zh_CN": "团队介绍",
		"en_US": "Team Introduction"
	},
	"max_blocks": "10",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "二级标题",
				"en_US": "Secondary title"
			},
			"id": "subtitle",
			"default": ""
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "列表项",
				"en_US": "List item"
			},
			"type": "slide-item",
			"settings": [
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": ""
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "星级",
						"en_US": "Star rating"
					},
					"id": "star",
					"max": 5,
					"min": 1,
					"unit": "",
					"default": 5
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "名称",
						"en_US": "Name"
					},
					"id": "name",
					"default": ""
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "国家",
						"en_US": "The State"
					},
					"id": "country",
					"default": ""
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "We Value Each of Our Customers",
			"subtitle": "what clients are saying"
		},
		"blocks": [
			{
				"title": "“Great service, fast shipping with beautiful products.”",
				"star": 5,
				"name": "Alex S.",
				"country": "New York, USA",
				"block_type": "slide-item"
			},
			{
				"title": "“Great service, fast shipping with beautiful products.”",
				"star": 5,
				"name": "Alex S.",
				"country": "New York, USA",
				"block_type": "slide-item"
			}
		]
	}
}
{% endschema %}